<template>
    <div
        id="voltageChart"
        class="chart"
    />
</template>
<script>
export default {
    props: {
        loudouData: {
            type: Object,
            default: () => { }
        }
    },
    data() {
        return {
            myChart: null
        }
    },
    watch: {
        loudouData: {
            handler() {
                this.$nextTick(() => {
                    this.drawLine()
                })
            },
            deep: true
        }
    },
    mounted() {
        this.drawLine()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.changeSize, true)
    },
    methods: {

        drawLine() {
            if (this.myChart) {
                this.myChart.clear()
                this.$echarts.dispose(this.myChart)
            }

            let data = [
                {
                    name: "匹配方案",
                    value: this.loudouData.status_0,
                    itemStyle: { color: '#4675ee' }
                },
                {
                    name: "强调优势",
                    value: this.loudouData.status_1,
                    itemStyle: { color: '#4c87f1' }
                },
                {
                    name: "签订合同",
                    value: this.loudouData.status_2,
                    itemStyle: { color: '#5198f3' }
                },
                {
                    name: "进行审批",
                    value: this.loudouData.status_3,
                    itemStyle: { color: '#57a6f6' }
                },
                {
                    name: "银行放款",
                    value: this.loudouData.status_4,
                    itemStyle: { color: '#5eb6f9' }
                },
                {
                    name: "回款",
                    value: this.loudouData.status_5,
                    itemStyle: { color: '#64c6fa' }
                }
            ];
            let option = {
                tooltip: {
                    trigger: 'item'

                },
                series: [
                    {
                        top: 0,
                        type: "funnel",
                        gap: -1,
                        minSize: 50,
                        height: 200,
                        top: '10%',
                        left: '15%',
                        width: "70%",
                        sort: 'descending',
                        z: 2,
                        label: {
                            show: true,
                            formatter: function(params) {
                                return params.name + params.value;
                            },
                            color: '#8F919B',
                            fontSize: 13,
                            position: 'right'
                        },
                        data: data
                    }
                ]
            };

            this.myChart = this.$echarts.init(document.getElementById('voltageChart'))
            // 绘制图表
            this.myChart.setOption(option)
            window.addEventListener('resize', this.changeSize, true)
        },
        changeSize() {
            this.myChart.resize()
        }
    }
}
</script>

<style lang="scss" scoped>
.chart {
    width: 100%;
    height: 100%;
}
</style>
